弹性布局

用于创建响应式、灵活的布局，使子元素能够根据可用空间自动调整大小和排列。

何时使用

• 适合设置元素之间的间距。
• 适合设置各种水平、垂直对齐方式。

一、属性

1. 主要属性

1）外观 - 水平对齐

主轴对齐：提供 5 种对齐方式，默认为头部对齐。

• 主轴对齐 - 头部：即弹性布局内组件靠左排列。
  

• 主轴对齐 - 中部：即弹性布局内组件居中排列。
  

• 主轴对齐 - 尾部：即弹性布局内组件靠右排列。
  

• 主轴对齐 - 两端对齐：即组件分散在两端。
  

• 主轴对齐 - 横向平分：将弹性布局等分为 n 个区域，每个组件居中于其所在区域。
  

2）外观 - 辅轴对齐

辅轴对齐：提供 5 种对齐方式，默认为头部对齐。

• 辅轴对齐 - 头部：组件在 y 轴上靠上排列。
  

• 辅轴对齐 - 中部：组件在 y 轴上居中排列。
  

• 辅轴对齐 - 尾部：组件在 y 轴上靠下排列。
  

• 辅轴对齐 - 基线对齐：元素基于第一个元素基线对齐。
  

• 辅轴对齐 - 拉伸填充：等价于 align-items: stretch。若组件高度/宽度小于容器，则自动等比扩展填满容器。
  
  

3）外观 - 垂直布局

排列方式：默认为水平。切换为垂直后，组件在 y 轴方向从上到下排列。

4）外观 - 间隔

间隔：支持选择模式和输入模式，默认选择模式为“中”。

• 选择模式：提供大、中、小三种间隔。

  
  
  
  

• 输入模式：可自定义间隔像素值（px），如下为 80px。
  
  

5）外观 - 自动换行

自动换行：默认关闭。开启后，当组件宽度为固定值或百分比，且总宽度超出容器时，将自动换行。下图中按钮宽度均为 45%。

二、样式

详见 通用样式。

三、常见使用场景

1. 卡片布局
   用于展示产品、内容项等，能在屏幕宽度变化时自动响应调整。

   

2. 表单布局
   实现标签与输入框灵活对齐，提高表单整洁性。

   

3. 图片展示
   实现响应式图片网格布局，适应不同设备展示需求。

   

4. 导航条
   创建水平或垂直导航菜单，确保菜单项均匀分布并具良好可读性。